import React, { Component } from 'react';
import ToastMsg from '../components/ToastMsg';
import { Container, Box, Button, Heading, Text, TextField } from 'gestalt';

class Signin extends Component {
  state = {
    username: '',
    password: '',
    email: '',
    toast: false,
    toastMsg: ''
  }

  handleChange = ({ event, value }) => {
    event.persist();
    this.setState({ [event.target.name]: value });
  }

  handleSubmit = event => {
    event.preventDefault();
    if (this.isFormEmpty(this.state)) {
      this.showToast('Fill in all Feilds');
      return;
    }
    
    // sign up user 37th
  }

  showToast = toastMsg => {
    this.setState({ toast: true, toastMsg })
    setTimeout(() => this.setState({ toast: false, toastMsg: '' }), 4000);
  }

  isFormEmpty = ({ username, email, password }) => {
    return !username || !email || !password;
  }

  render() {
    const { toastMsg, toast } = this.state;
    return (
      <Container>
        <Box
          dangerouslySetInlineStyle={{
            __style: {
              backgroundColor: '#ebe2da'
            }
          }}
          margin={4}
          padding={4}
          shape='rounded'
          display='flex'
          justifyContent='center'
        >
          {/* Sign Up Form */}
          <form
            style={{
              display: 'inlineBlock',
              textAlign: 'center',
              maxWidth: 450
            }}
            onSubmit={this.handleSubmit}
          >

            {/* Sign Up Form Heading */}
            <Box
              marginBottom={2}
              display='flex'
              direction='column'
              alignItems='center'
            >
              <Heading color='midnight'>Let's Get Started</Heading>
              <Text italic color='orchid'>Sign up to order some brews!</Text>
            </Box>

            {/* Username Input */}
            <TextField
              id='username'
              type='text'
              name='username'
              placeholder='Username'
              onChange={this.handleChange}
            />

            {/* Email Input */}
            <TextField
              id='email'
              type='email'
              name='email'
              placeholder='Email Address'
              onChange={this.handleChange}
            />

            {/* Password Input */}
            <TextField
              id='password'
              type='password'
              name='password'
              placeholder='Password'
              onChange={this.handleChange}
            />

            <Button
              color='blue'
              text='Submit'
              type='submit'
              inline
            />

          </form>
        </Box>
        <ToastMsg message={toastMsg} show={toast} />
      </Container>
    )
  }
}

export default Signin;